<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="base_top.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>筛选器</title>
    <%@ include file="base_head.jsp" %>
    <link rel="stylesheet" href="<%=basePath%>css/goods/goodFilter_style.css">
    <link rel="stylesheet" href="<%=basePath%>css/goods/kkpager_blue.css">
    <link rel="stylesheet" href="<%=basePath%>css/goods/nav.css">
	<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/goods_filter/kkpager.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/goods_filter/nav.js"></script>
  </head>
  
  
<body>
<%@ include file="../user/page_topbar.html" %>
<%@ include file="nav.html" %>

<div style="width:960px;margin:10px auto; clear:both; text-align:center;  ">
</div>
<div class="mainbody">
        <!--主体左部分-->
        <div class="mainbody_left">
            <!--左部分筛选器-->
            <div class="selectNumberScreen">

                <div id="selectList" class="screenBox screenBackground">

                    <dl class="listIndex" attr="rtype">
                        <dt>艺术分类：</dt>
                        <dd style="height:65px" class="typeList">
                            <a href="javascript:void(0)" attrval="">全部</a> 
			  				<s:iterator value="#request['categories']" id="category">
			  				<a href="javascript:void(0)" attrval='<s:property value="#request.category.gcId"/>'><s:property value="#request.category.categoryName"/></a>
			  				</s:iterator>
                        </dd>
                    </dl>

                    <s:iterator value="#request.goodAttrs" id="attr">
						<s:if test="%{#request.attr.attrName == '材质'}">
							<dl class="listIndex" attr="texture" id='<s:property value="#request.attr.attrId"/>'>
						</s:if>
						<s:elseif test="%{#request.attr.attrName == '题材'}">
							<dl class="listIndex" attr="theme" id='<s:property value="#request.attr.attrId"/>'>
						</s:elseif>
						<s:elseif test="%{#request.attr.attrName == '技法'}">
							<dl class="listIndex" attr="technique" id='<s:property value="#request.attr.attrId"/>'>
						</s:elseif>
						<s:elseif test="%{#request.attr.attrName == '形制'}">
							<dl class="listIndex" attr="shape" id='<s:property value="#request.attr.attrId"/>'>
						</s:elseif>
						<s:elseif test="%{#request.attr.attrName == '作品风格'}">
							<dl class="listIndex" attr="style" id='<s:property value="#request.attr.attrId"/>'>
						</s:elseif>
						<s:elseif test="%{#request.attr.attrName == '字体'}">
							<dl class="listIndex" attr="font" id='<s:property value="#request.attr.attrId"/>'>
						</s:elseif>
							<dt><s:property value="#request.attr.attrName"/> ：</dt>
							<dd style="height:65px" class="attrList">
						<a href="javascript:void(0)" values2="" values1="" attrval=''>全部</a>
						<s:iterator value="#request.attr.attrValues" id="attrValue">
							<a href="javascript:void(0)" values2="" values1="" attrval='<s:property value="#request.attrValue"/>'><s:property value="#request.attrValue"/> </a>
						</s:iterator>
						</dd>
						</dl>
					</s:iterator>

                    <dl class="listIndex" attr="price">
                        <dt>价 格：</dt>
                        <dd style="height:50px" class="attrList">
                            <a href="javascript:void(0)" values2="499" values1="1" attrval="">全部</a>
                            <a href="javascript:void(0)" values2="499" values1="1" attrval="1-499">1-499</a>
                            <a href="javascript:void(0)" values2="999" values1="500" attrval="500-999">500-999</a>
                            <a href="javascript:void(0)" values2="1999" values1="1000" attrval="1000-1999">1000-1999</a>
                            <a href="javascript:void(0)" values2="2999" values1="2000" attrval="2000-2999">2000-2999</a>
                            <a href="javascript:void(0)" values2="4999" values1="3000" attrval="3000-4999">3000-4999</a>
                            <a href="javascript:void(0)" values2="0" values1="5000" attrval="5000-999999999">5000以上</a>
                        </dd>
                    </dl>

                    <dl class=" listIndex" attr="local">
                        <dt>所在地：</dt>
                        <dd style="height:120px" class="attrList">
                            <a href="javascript:void(0)" values2="" values1="" attrval="">全部</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="北京">北京</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="天津">天津</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="河北">河北</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="内蒙古">内蒙古</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="山西">山西</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="上海">上海</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="安徽">安徽</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="江苏">江苏</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="浙江">浙江</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="山东">山东</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="福建">福建</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="江西">江西</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="广西">广西</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="海南">海南</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="河南">河南</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="湖北">湖北</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="湖南">湖南</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="黑龙江">黑龙江</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="吉林">吉林</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="辽宁">辽宁</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="重庆">重庆</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="四川">四川</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="云南">云南</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="贵州">贵州</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="西藏">西藏</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="山西">山西</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="甘肃">甘肃</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="宁夏">宁夏</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="青海">青海</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="大理">大理</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="新疆">新疆</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="香港">香港</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="澳门">澳门</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="台湾">台湾</a>
                            <a href="javascript:void(0)" values2="" values1="" attrval="国外">国外</a>
                        </dd>
                    </dl>

                </div>

                <div class="hasBeenSelected">
                    <dl>
                        <dt>您已选择：</dt>
                        <dd style="display:none" class="clearDd">
                            <div class="clearList"></div>
                            <div style="display:none;" class="eliminateCriteria">清除筛选条件</div>
                        </dd>
                    </dl>
                </div>
            </div>
            <div style="margin:10px auto; text-align:center;">
                <!--左部分作品展示-->
                <div class="art_list">
                    <s:iterator value="#request['goods']" id="good" >
				        <div class="list_div" id="list_div">
				            <div class="listDiv_img"><a href='goods/goodsDetail?id=<s:property value="#request.good.goodsNum"/>' target="_blank"/><img src='<s:property value="#request.good.mainpic"/>'></a></div>
				            <div class="listDiv_text">
				                <div class="listText_title"><a href="#"><font><s:property value="#request.good.userName"/></font></a></div>
				                <div class="listText_pri"><font><s:property value="#request.good.goodsPrice"/></font></div>
				                <div class="listText_btm"><a href="#"><font><s:property value="#request.good.goodsName"/></font></a></div>
				            </div>
				        </div>
				     </s:iterator>
                </div>
            </div>
            <!-- 分页 -->
            <div style="width:574px; margin:0 auto;">
                <div id="kkpager"></div>
            </div>
        </div>
        <!--主体右部分-->
        <div class="mainbody_right">
            <!--右部分文章导航-->
            <div class="article">
                <div class="arti_line"></div>
                <div class="arti_title">导购文章&nbsp;&nbsp;&nbsp;&nbsp;/</div>
                <div class="arti_content">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="arti_con_con">
                                    <div class="arti_con_con_num">1</div>
                                    <div class="arti_con_con_title">最具潜力的二十位黑马艺术家</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="arti_con_con">
                                    <div class="arti_con_con_num">1</div>
                                    <div class="arti_con_con_title">最具潜力的二十位黑马艺术家</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="arti_con_con">
                                    <div class="arti_con_con_num">1</div>
                                    <div class="arti_con_con_title">最具潜力的二十位黑马艺术家</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="arti_con_con">
                                    <div class="arti_con_con_num">1</div>
                                    <div class="arti_con_con_title">最具潜力的二十位黑马艺术家</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="arti_con_con">
                                    <div class="arti_con_con_num">1</div>
                                    <div class="arti_con_con_title">最具潜力的二十位黑马艺术家</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--右部分作品展示-->
            <%@ include file="goodsFilter_recWork.html" %>
            <!--右部分作品展示-->
        </div>
        <%@ include file="goods_bottom.html" %>
    </div>
</div>

<script type="text/javascript">
    function getUrl() {
        var tarray = new Array("price", "local", "texture", "textureId", "theme", "themeId", "technique", "techniqueId", "shape", "shapeId", "style", "styleId", "font", "fontId", "gcgId");
        var url = "?rtype=" + $("#form input[name='rtype']").val();
        for (var i = 0; i < tarray.length; i++) {
            url += "&" + tarray[i] + "=" + $("input[name='" + tarray[i] + "']").val();
        }
        return url;
    }
    $(function () {
        var totalPage = $("input[name='totalPage']").val();
        var totalRecords = $("input[name='totalRecords']").val();
        var pageNo = $("input[name='pageNo']").val();
        if (!pageNo) {
            pageNo = 1;
        }
        var url = getUrl();

        kkpager.generPageHtml({
        	pno : pageNo,
			total : totalPage,
			totalRecords : totalRecords,
            hrefFormer: 'goods/goodsFilter',
            isShowTotalPage: false,
            isShowCurrPage: false,
            isShowTotalRecords: false,
            isGoPage: false,
            getLink: function (n) {
                return this.hrefFormer + url + "&pageNo=" + n;
            }
        });
    });
</script>

<!-- 隐藏表单 -->
<div class="hid_area">
    <form id="form" action="goods/goodsFilter" method="get">
        <!-- 类型 -->
        <input type="hidden" name="rtype" value="${rtype}"/>
        <!-- 题材 -->
        <input type="hidden" name="themeId" value="${themeId}"/>
        <input type="hidden" name="theme" value="${theme}"/>
        <!-- 材质 -->
        <input type="hidden" name="textureId" value="${textureId}"/>
        <input type="hidden" name="texture" value="${texture}"/>
        <!-- 技法 -->
        <input type="hidden" name="techniqueId" value="${techniqueId}"/>
        <input type="hidden" name="technique" value="${technique}"/>
        <!-- 形制 -->
        <input type="hidden" name="shapeId" value="${shapeId}"/>
        <input type="hidden" name="shape" value="${shape}"/>
        <!-- 作品风格 -->
        <input type="hidden" name="styleId" value="${styleId}"/>
        <input type="hidden" name="style" value="${style}"/>
        <!-- 字体 -->
        <input type="hidden" name="fontId" value="${fontId}"/>
        <input type="hidden" name="font" value="${font}"/>
        <!-- 价格 -->
        <input type="hidden" name="price" value="${price}"/>
        <!-- 所在地 -->
        <input type="hidden" name="local" value="${local}"/>
		<!-- 分类群组 -->
        <input type="hidden" name="gcgId" value="${gcgId}"/>
    </form>
    <input type="hidden" name="pageNo" value="${pageNo}"/>
    <input type="hidden" name="totalPage" value="${totalPage}"/>
    <input type="hidden" name="totalRecords" value="${totalRecords}"/>
</div>


<script type="text/javascript">
var dlNum  =$("#selectList").find("dl");
for (var i = 0; i < dlNum.length; i++) {
	$(".hasBeenSelected .clearList").append("<div class=\"selectedInfor selectedShow\" style=\"display:none\"><span></span><label></label><em></em></div>");
}

var refresh = "true";

var typeArray = new Array("rtype", "price", "local", "texture", "theme", "technique", "shape", "style", "font");
var attrArray = new Array("texture", "theme", "technique", "shape", "style", "font");
var pageArray = new Array("pageNo, totalPage", "totalRecords");

//设置页面加载时属性选中状态
for(var i = 0; i<typeArray.length; i++) {
	$("dl[attr="+typeArray[i]+"] a").each(function(){
		var attrval = $(this).attr("attrval");
		if(attrval == $("input[name="+typeArray[i]+"]").val()) {
			sss($(this));
		}
	});
}
for(var i = 0; i<attrArray.length; i++) {
	var id = $("dl[attr="+attrArray[i]+"]").attr("id");
	$("#form input[name="+attrArray[i]+"Id"+"]").val(id);
}

function sss(a) {
	var text =a.text();
	
	//获取点击a的attrval值
	var attrval = a.attr("attrval");
	//获取筛选类别
	var dlAttr = a.parents("dl").attr("attr");
	//设置表单数据
	$("input[name="+dlAttr+"]").val(attrval);
	
	var selectedShow = $(".selectedShow");
	var textTypeIndex =a.parents("dl").index();
	var textType =a.parent("dd").siblings("dt").text();
	
	index = textTypeIndex -(2);
	$(".clearDd").show();
	$(".selectedShow").eq(index).show();
	a.addClass("selected").siblings().removeClass("selected");
	selectedShow.eq(index).find("span").text(textType);
	selectedShow.eq(index).find("label").text(text);
	var show = $(".selectedShow").length - $(".selectedShow:hidden").length;
	if (show > 1) {
		$(".eliminateCriteria").show();
	};
}

//清除value
function clearVal(array) {
	for (var i = 0; i<array.length; i++) {
		$("input[name="+array[i]+"]").val("");
	}
}

//设置类型属性点击事件
$(".typeList a ").live("click",function(){
	sss($(this));
	clearVal(attrArray);
	$("#form").submit();
});
//设置规格属性点击事件
$(".attrList a ").live("click",function(){
	sss($(this));
	$("#form").submit();
});

/* <!-- 单个条件删除 --> */
$(".selectedShow em").live("click",function(){
	$(this).parents(".selectedShow").hide();
	var textTypeIndex =$(this).parents(".selectedShow").index();
	index = textTypeIndex;
	$(".listIndex").eq(index).find("a").removeClass("selected");
	
	if($(".listIndex .selected").length < 2){
		$(".eliminateCriteria").hide();
	};
});

/* <!-- 清除筛选条件 --> */
$(".eliminateCriteria").live("click",function(){
	$(".selectedShow").hide();
	$(this).hide();
	$(".listIndex a ").removeClass("selected");
}); 
</script>
<div style="float:left">
<p><a href="http://www.mycodes.net/" target="_blank"></a></p>
</div>
</body>
</html>
